<template>
<div class="mb-30 bg-grey">
      <!--面包屑开始-->
    <div class="archive-header pt-10 wow fadeInUp animated">
      <div class="container">
          <h2 class="font-weight-900">文章详情</h2>
          <div class="breadcrumb">
              <a href="index.html" rel="nofollow">文章</a>
              <span rel="nofollow" >{{article.articleTitle}}</span> 
          </div>
          <div class="bt-1 border-color-1 mt-10 mb-20"></div>
      </div>
    </div>
    <!--面包屑结束-->
    <div class="container ">
       <div class="row">
      <el-card class="col-lg-8 mb-20">
        <v-md-preview :text="article.articleContent"></v-md-preview>
        <!--分类、标签、点赞、上一篇、下一篇-->
        <div class="block-title pt-10 pb-20 pl-10 pr-10" style="display: flex; justify-content: space-between;">
            <div>
                <a class="tag"><i class="elegant-icon icon_tags mr-5"></i>标签：</a>
                <router-link v-for="(item,index) in article.tagVOList" :key="item.id"  :to="`/tag/${item.id}`"><span class="post-cat text-warning">#{{item.tagName}}&nbsp;</span></router-link>
            </div>
            <div>
                <a class="tag"> <i class="elegant-icon icon_grid-3x3 mr-5 mt-1"></i>分类：</a>
                <router-link :to="`/category/${article.category.id}`"><span class="post-cat text-primary">{{article.category.categoryName}}</span></router-link>
            </div>
        </div>
          <div class="sidebar-widget widget-latest-posts mb-20 wow fadeInUp animated" >
              <div class="post-block-list post-module-1 " >
                  <ul class="list-post"  style="display: flex; justify-content: space-between;">
                 <el-card shadow="never" class=" transition-normal col-lg-4"  > 
                    <p class="mb-0" @click="toLast">
                      上一篇:{{article.lastArticle == null ? '没有了' : article.lastArticle.articleTitle}}
                    </p>
                 </el-card>
                   <el-card shadow="never" class=" transition-normal col-lg-4"  > 
                    <p class="mb-0"  @click="toNext" >
                      下一篇：{{article.nextArticle == null ? '没有了' : article.nextArticle.articleTitle}}
                    </p>
                 </el-card>
                  </ul>
              </div>
          </div>
        <!--  -->
        <!--评论开始-->
        <h5 class="block-title pt-10 pb-10" style="color: #6e6e6e">
          &nbsp;&nbsp;<svg
            t="1695477921532"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5077"
            width="20"
            height="20"
          >
            <path
              d="M512 0C230.4 0 0 199.111111 0 446.577778s230.4 446.577778 512 446.577778V1024s312.888889-219.022222 366.933333-267.377778c91.022222-79.644444 145.066667-190.577778 145.066667-312.888889C1024 199.111111 793.6 0 512 0z m0 76.8c238.933333 0 435.2 164.977778 435.2 372.622222 0 93.866667-42.666667 187.733333-122.311111 258.844445-31.288889 28.444444-159.288889 119.466667-258.844445 190.577777v-76.8H512C273.066667 822.044444 76.8 654.222222 76.8 449.422222S273.066667 76.8 512 76.8zM219.022222 438.044444c0 36.977778 31.288889 68.266667 68.266667 68.266667s68.266667-31.288889 68.266667-68.266667c0-42.666667-31.288889-68.266667-68.266667-68.266666s-68.266667 31.288889-68.266667 68.266666z m466.488889 0c0 39.822222 34.133333 73.955556 73.955556 73.955556 39.822222 0 73.955556-34.133333 73.955555-73.955556 0-42.666667-34.133333-73.955556-73.955555-73.955555-39.822222 2.844444-73.955556 36.977778-73.955556 73.955555zM512 366.933333c-39.822222 0-73.955556 34.133333-73.955556 73.955556S472.177778 512 512 512s73.955556-34.133333 73.955556-73.955556c0-42.666667-34.133333-71.111111-73.955556-71.111111z"
              fill="#1296db"
              p-id="5078"
            ></path></svg
          >&nbsp;&nbsp;评论
        </h5>
        <form class="input-group form-subcriber mt-10 d-flex single-comment">
        <div class="thumb mr-20">
            <img
            style="width:48px; height:48px; border-radius:50%"
            :src="userAvatar"
            alt=""
            />
        </div>
         <MyEmoji @emoji-selected="handleEmojiSelected"></MyEmoji>
        <textarea rows="4" cols="50"  v-model="commentContent" type="html" class="form-control bg-white font-small" style="border-top-left-radius:40px;  border-bottom-left-radius: 40px;" placeholder="">     
        </textarea>
        <el-button class="btn bg-primary text-white" @click.prevent="comment(parentId = null,replayId = null, toUid = null,commentContent = commentContent)" >发送</el-button>    
        </form>
        <div class="comments-area entry-wraper mb-50 mt-30">
          <div class="comment-list wow fadeIn animated" v-for="(parentComment,index) in recordList" :key="parentComment.id">
            <div class="single-comment justify-content-between d-flex">
              <div class="user justify-content-between d-flex">
                <div class="thumb">
                  <img
                    :src="parentComment.avatar"
                    alt=""
                  />
                </div>
                <div class="desc">
                  <h5>
                    <a href="#">{{parentComment.fromNickname}}</a>
                  </h5>
                  <p class="comment">
                  {{parentComment.commentContent}}&nbsp;
                  <svg @click="commentLike(parentComment.id)" t="1695696132900" class="icon pb-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1461" width="18" height="18"><path d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z" p-id="1462" fill="#1296db"></path></svg>
                    {{parentComment.likeCount == 0 ? '' : parentComment.likeCount }}
                  </p>
                </div>
              </div>
              <div class="ml-auto mt-auto">
                <div class="d-flex justify-content-between ">
                    <div class="d-flex align-items-center">
                      <p class="date">{{parentComment.createTime}}</p>
                    </div>
                    <div class="reply-btn">
                      <a   class="btn-reply" v-show="userInfo.id != parentComment.fromUid" @click="answerParent(index)">回复</a>
                    </div>
                  </div>
              </div>
            </div>
            <div v-show="parentComment.showReplyBox" :key="parentComment.id">
              <div class="input-group form-subcriber mt-10 d-flex single-comment">
              <MyEmoji @emoji-selected="handleEmojiSelected" ></MyEmoji>
              <textarea rows="4" cols="50"  v-model="commentCommentParent" type="html" class="form-control bg-white font-small" style="border-top-left-radius:40px;  border-bottom-left-radius: 40px;" placeholder="">     
              </textarea>
              <el-button class="btn bg-primary text-white" @click.prevent="comment(parentId = parentComment.id,replayId = parentComment.id, toUid = parentComment.fromUid,commentContent = commentCommentParent)" >发送</el-button> 
              </div>
            </div>
            <!--子评论开始-->
            <div v-if="parentComment.replyVOList" v-for="(child,index) in parentComment.replyVOList" :key="child.id">
              <div class="single-comment depth-2 justify-content-between d-flex mt-30">
                    <div class="user justify-content-between d-flex" >
                      <div class="thumb">
                        <img
                          :src="child.avatar"
                          alt=""
                        />
                      </div>
                      <div class="desc">
                            <h5>
                              <a href="#">{{child.fromUid == userInfo.id ? '我' :  child.toNickname }}&nbsp;&nbsp;</a>
                                <a href="#" ><svg t="1695697346999" class="icon pb-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8405" width="19" height="19"><path d="M761.856 405.504l-255.68-170.432A128 128 0 0 0 307.2 341.568v340.864a128 128 0 0 0 199.008 106.496l255.648-170.432a128 128 0 0 0 0-212.992z" p-id="8406"></path></svg>&nbsp;&nbsp;</a>
                              <a href="#" style="color:#5869da">{{child.toUid == userInfo.id ? '我' : '@' + child.toNickname }}</a>
                            </h5>
                        <p class="comment">
                          {{child.commentContent}}
                          &nbsp;
                        <svg @click="commentLike(child.id)" t="1695696132900" class="icon pb-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1461" width="18" height="18"><path d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z" p-id="1462" fill="#1296db"></path></svg>
                          {{child.likeCount == 0 ? '' : child.likeCount }}
                        </p>
                      </div>
                    </div>
                    <div class="ml-auto mt-auto">
                    <div class="d-flex justify-content-between">
                      <div class="d-flex align-items-center">
                        <p class="date">{{child.createTime}}</p>
                      </div>
                      <div class="reply-btn">
                        <a  class="btn-reply" v-show="userInfo.id != child.fromUid" @click="answerChild(parentComment.id,index)">回复</a>
                      </div>
                    </div>
                    </div>
              </div>
                 <div v-show="child.showReplyBox" :key="child.id">
         <div class="single-comment depth-2 justify-content-between d-flex mt-10" >
            <div class="input-group form-subcriber mt-10 d-flex single-comment">
            <MyEmoji @emoji-selected="handleEmojiSelected" ></MyEmoji>
            <textarea  v-model="commentContentChild" type="html" class="form-control bg-white font-small " style="border-top-left-radius:40px;  border-bottom-left-radius: 40px; height:40px !important;" placeholder="">     
            </textarea>
            <el-button class="btn bg-primary text-white" @click.prevent="comment(parentComment.id,replayId = child.id, toUid = child.fromUid,commentContent = commentContentChild)" >发送</el-button> 
            </div>
            </div>
                 </div>
   
            </div>
          </div>
        </div>
        <!--评论结束-->
      </el-card>
      <RightCard></RightCard>      
       </div>
    </div>
</div>
</template>

<script>
import RightCard from '@/views/home/rightcard'
import ConfettiGenerator from 'canvas-confetti';
import {getArticleDetail} from '@/api/article'
export default {
  name:'',
  data() {
    return {
      article:{
        id:undefined,
        articleTitle:'',
        articleContent:'',
        articleContent:'',
        articleType:'',
        viewCount:'',
        likeCount:'',
        category:{},
        tagVOList:[],
        lastArticle:{},
        nextArticle:{},
        createTime:'',
      },
      recordList:[
        {
          replyVOList:[],
        }
      ],
      commentContent:'',
      commentContentChild:'',
      commentCommentParent:'',  
    }
  },
  components:{
    RightCard
  },
  methods: {
    getArticle(){
      getArticleDetail(this.$route.params.articleId).then((res)=>{
        if(res.code == 200){
          this.article = res.data
        }
      })
    },
    toNext(){
      if(this.article.nextArticle == null){
        this.$message({
          type:'warning',
          message:'没有了！'
        })
      }
      else{
        this.$router.push(`/article/${this.article.nextArticle.id}`)
      }
    },
    toLast(){
      if(this.article.lastArticle == null){
        this.$message({
          type:'warning',
          message:'没有了！'
        })
      }
      else{
        this.$router.push(`/article/${this.article.lastArticle.id}`)
      }
    },
    //处理评论列表
    processRecordList() {
        this.recordList.forEach((item) => {
          item.showReplyBox = false;
          if(item.replyVOList)
          {
          item.replyVOList.forEach((item) => {
            item.showReplyBox = false;
          });
          }
        });
    },
    handleEmojiSelected(emoji) {
      // 处理选中的emoji
      this.selectedEmoji = emoji;
      this.commentContent += emoji;
    },
     getCommentList(){
      this.$API.article.getCommentList(1,this.$route.params.articleId,1,100).then((res)=>{
      if(res.code == 200)
      {
        this.recordList = res.data.recordList;
        if(this.recordList  != null){
        this.processRecordList();
        }

      }
      else{
        this.$message({
          type:'error',
          message:'获取评论列表失败！'
        })
      }
      })

    },
    answerParent(index){
      let item = this.recordList[index];
      item.showReplyBox = item.showReplyBox ? false : true;
      this.$set(this.recordList, index, item);
    },
    answerChild(parentId,index){
      this.recordList.forEach((item) =>{
        if(item.id == parentId)
        {
         let childItem = item.replyVOList[index];
          console.log('childrenItem---------',childItem)
         childItem.showReplyBox = !childItem.showReplyBox;
         this.$set(item.replyVOList,index,childItem);
         console.log('update',item.replyVOList[index])
        }
      })
    },
    //点赞某条评论
    async commentLike(commentId){
      const res = await this.$API.link.likeComment(commentId)
      if(res.code == 200)
      {
        this.$message({
          type:'success',
          message:'点赞成功！'
        })
        this.getCommentList();
      }
      else{
          this.$message({
          type:'warning',
          message:res.msg
        })
      }
    },
    //评论
   async comment(parentId = null,replayId = null, toUid = null,commentContent = ''){
    let data = {
      commentContent:commentContent,
      commentType:1,
      parentId:parentId,
      replyId:replayId,
      toUid:toUid,
      typeId:this.$route.params.articleId,
    }
    if(data.commentContent.trim() == ''){
      this.$message({
        type:'warning',
        message:'评论内容不能为空！'
      })
      return;
    }
    console.log('id',data)
    const  res = await this.$API.article.addComment(data);
    if(res.code == 200){
      console.log(this.site.commentCheck)
      this.site.commentCheck == 0 ? this.$message({
        type:'success',
        message:'评论成功！'
      }) : this.$message({
        type:'success',
        message:'评论成功！请等待管理员审核！'
      })
      this.getCommentList();
      this.commentContent = ''
      this.commentContentChild = '',
      this.commentCommentParent = ''
    }
    else{
      if(res.msg == '未登录'){
      this.$message({
        type:'error',
        message: '请先登录！'
      })
      }
    }
   }
  },
  mounted() {
      this.getArticle();
    this.getCommentList();
  },
  computed:{
    site() {
      return this.$store.state.site.site.siteConfig || {};
    },
    userAvatar(){
        return this.$store.state.user.avatar || this.$store.state.site.site.siteConfig.touristAvatar || '';
    },
    userInfo(){
        return this.$store.state.user.userInfo || '';
    }
  }
};
</script>

<style>
.charts {
  width: 100%;
  height: 100%;
}

.post-thumb {
    overflow: hidden;
    position: relative;
  }

  .post-thumb img {
    transition: transform 0.3s ease;
  }

  .post-thumb:hover img {
    transform: scale(1.1); /* Adjust the scale factor as needed */
  }

  .form-control{
    height: 48px !important;
  }
 
 .tag{
    color: #777777 !important;
    font-size: 15px;
 }

/* pre {
    overflow: hidden !important;
} */

/* pre::before {
    content: "";
    position: absolute;
    background: rgb(53, 205, 75);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 11px;
    left:119px;
    transform: translate(-50%);
}

pre code {
    display: inline-block;
    padding-bottom: 20px;
    position: relative;
    top: 20px;
}

pre code::before {
    content: "";
    position: absolute;
    background: red;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: -30px;
    left: 10px;
    transform: translate(-50%);
}

pre code::after {
    content: "";
    position: absolute;
    background: sandybrown;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: -30px;
    left: 28px;
    transform: translate(-50%);
}

.vuepress-markdown-body div[class*=v-md-pre-wrapper-].line-numbers-mode:after{
  background-color: rgb(15, 14, 14);
}

@media (max-width: 419px) {
  .vuepress-markdown-body div[class*="v-md-pre-wrapper-"] {
    margin: .85rem -1.5rem;
    border-radius: 8px;
  }
} */

</style>